<template>
  <div class="main_hot_good_question_for_avatar_main">
    <div class="main_hot_good_question_for_avatar_body">
      <img :src="props.userinfo.avatar" style="" class="main_hot_good_question_for_avatar_item_avatar" alt="头像">
      <div>
        <div class="main_hot_good_question_for_avatar_item">
          <div class="main_hot_good_question_for_avatar_item_one">昵称：</div>
          {{ props.userinfo.nickname }}
        </div>
        <div class="main_hot_good_question_for_avatar_item">
          <div class="main_hot_good_question_for_avatar_item_one">性别：</div>
          {{ props.userinfo.sex === '0' ? '男' : '女' }}
        </div>
        <div class="main_hot_good_question_for_avatar_item">
          <div class="main_hot_good_question_for_avatar_item_one">积分：</div>
          {{ props.userinfo.integral }}
        </div>
        <div class="main_hot_good_question_for_avatar_item">
          <div class="main_hot_good_question_for_avatar_item_one">粉丝数：</div>
          {{ props.userinfo.friendApplyCount }}
        </div>
        <div class="main_hot_good_question_for_avatar_item">
          <div class="main_hot_good_question_for_avatar_item_one">关注数：</div>
          {{ props.userinfo.attentionCount }}
        </div>
        <div class="main_hot_good_question_for_avatar_item">
          <div class="main_hot_good_question_for_avatar_item_one">回答数：</div>
          {{ props.userinfo.replyCount }}
        </div>
      </div>
    </div>
    <div v-if="props.userinfo.introduction===null" class="main_hot_good_question_for_avatar_item_introduction">
      简介：空空如也
    </div>
    <div v-else class="main_hot_good_question_for_avatar_item_introduction">
      简介：{{ props.userinfo.introduction }}
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  userinfo: Object
})
</script>

<style lang="less" scoped>
.main_hot_good_question_for_avatar_main {
  font-size: 15px;

  .main_hot_good_question_for_avatar_body {
    display: flex;

    .main_hot_good_question_for_avatar_item_avatar {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      margin-top: 5px;
      margin-bottom: 5px;
    }

    .main_hot_good_question_for_avatar_item {
      display: flex;
      margin-left: 10px;
      padding: 1px;

      .main_hot_good_question_for_avatar_item_one {
        width: 60px;
      }
    }
  }

  .main_hot_good_question_for_avatar_item_introduction {
    padding: 10px;
    width: 300px;
    word-break: break-word !important;
  }
}
</style>